<template>
    <card-echarts
        title="目录分类统计"
        id="picType"
        width="100%"
        height="400px"
        :echartsOPtion="option"
    ></card-echarts>
</template>
  
<script>
import { defineComponent, ref } from "vue";
import cardEcharts from "@/components/cardEcharts/index.vue";
import { reportTypeApi } from "@/api/index";
export default defineComponent({
    name: "EchartPic",
    components: { cardEcharts },
    setup() {
        const option = ref({});
        reportTypeApi().then((data) => {
            option.value = {
                tooltip: {
                    trigger: "item",
                },
                title: {
                    text: "目录分类统计",
                    subtext: "按类型",
                    left: "center",
                },
                legend: {
                    left: "0",
                    orient: "vertical",
                },
                series: [
                    {
                        name: "目录分类统计",
                        type: "pie",
                        radius: ["40%", "70%"],
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "20",
                                fontWeight: "bold",
                            },
                        },
                        data: data.arrayData,
                    },
                ],
            };
        });
        return {
            option,
        };
    },
});
</script>

<style>
</style>